<template>
    <div class="page-top">
                 <!-- 头条 -->
                 <div class="headlines">
                      <div class="headlines-title">
                          <img src="../../assets/icon/stickies-fill.svg" alt="头条" style="display: inline; height:100%;">
                          <h4 style="display:inline ;line-height: 24px; margin-left: 8px;cursor: default;">头条</h4>
                      </div>
                      <img src="../../assets/images/20221207093454.jpg" alt="" style="height: 50%;width: 100%;cursor: pointer;">
                      <a href="javascript:;" style="text-decoration: none;color: #000;"><h4>ChatGpt玩儿[脱]了,写了份毁灭人类计划的书,还遭到了Stack Overflow的封杀.....</h4></a>
                      <a href="javascript:;" style="text-decoration: none;color: #000;opacity: 0.5;font: 1em sans-serif;"><h5 style="margin: 8px 5px;"> 为什么ChatGpt会出现那么多错误?</h5></a>
                 </div>
                 <!-- 头条切换 -->
                 <div class="headswiper">
                    <div class="headswiper-top" style="height: 20px;">
                        <div style="float: right;">
                            <img src="../../assets/icon/chevron-left.svg" alt="左" style="height: 20px;cursor: pointer;" :style="{opacity:style.headOpacity}" @click="headswiperLeft" >
                           <img src="../../assets/icon/chevron-right.svg" alt="右" style="height: 20px;cursor: pointer;" @click="headswiperRight">
                        </div>
                    </div>
                    <!-- 头条链接 -->
                    <div class="headswiper-link">
                        <li v-for="item in headitems.slice(slice.num,slice.num2)" :key="item.articleId" >
                          <a :href="'/articleDetail.html?articleid='+item.articleId" target="_blank"><h3 style="font-weight: normal;">{{item.title}}</h3>
                            <p style="opacity: 0.5;margin-top: 5px;cursor: pointer;text-decoration: none">{{item.summarize}}</p>
                          </a>
                        </li>
                        
                       
                    </div>
                 </div>
                 <!-- 热点 -->
                 <div class="hotspot">
                    <div class="hotspot-top">
                         <div style="float: left;">
                            <img src="../../assets/icon/file-text-fill.svg" alt="热点"  style="display: inline;height: 25px;">
                            <h4 style="display:inline ;position: relative;bottom: 8px;cursor: default">热点</h4>
                        </div>
                        <div style="float: right;">
                            <img src="../../assets/icon/chevron-left.svg" alt="左" style="height: 20px;cursor: pointer;" :style="{opacity:style.hotspotOpacity}" @click="hotspotLeft">
                           <img src="../../assets/icon/chevron-right.svg" alt="右" style="height: 20px;cursor: pointer;" @click="hotspotRight">
                        </div>  
                    </div>
                    <!-- 热点链接 -->
                    <div class="hotspot-link">
                        <li v-for="item in headitems.slice(slice.num3,slice.num4)" :key="item.articleId">
                          <a :href="'/articleDetail.html?articleid='+item.articleId" target="_blank"><h3 style="font-weight: normal;">{{item.title}}</h3>
                            <p style="opacity: 0.5;margin-top: 5px;cursor: pointer;text-decoration: none">{{item.summarize}}</p>
                          </a>

                        </li>
                    </div>
                 </div>
                 <!-- 广告位 -->
                 <div class="picture-ad">
                     <img src="../../assets/images/1666684236524.jpg" alt="广告" style="width: 100%;height: 100%;">

                 </div>


              </div>
</template>

<script>
import {getHotpotArticles} from "@/api/article";

export default {
    name:"PageTop",
    data() {
        return {
            headitems:[
            ],
            hotitems:[
            ],
            slice:{
                num:0,
                num2:5,
                num3:0,
                num4:5
            },
            style:{
                hotspotOpacity:0.3,
                headOpacity:0.3  
            }
            
        }
    },
    methods: {
        // 头条链接翻页向右
        headswiperRight(){
                if(this.slice.num2<this.headitems.length){
                    this.slice.num+=5;
                    this.slice.num2+=5;
                    if(this.slice.num>0){
                        this.style.headOpacity=1;
                    }
                }
        },
        // 头条链接翻页向左
        headswiperLeft(){
            if(this.slice.num>0){
                    this.slice.num-=5;
                    this.slice.num2-=5;
                    
                }
                if(this.slice.num==0){
                    this.style.headOpacity=0.3;
                }
        },
        // 热点链接翻页向右
        hotspotRight(){
            if(this.slice.num4<this.hotitems.length){
                    this.slice.num3+=5;
                    this.slice.num4+=5;
                    if(this.slice.num3>0){
                        this.style.hotspotOpacity=1;
                    }
                    
                }
        },
        // 热点链接翻页向左
        hotspotLeft(){
            if(this.slice.num3>0){
                    this.slice.num3-=5;
                    this.slice.num4-=5;
                    
                } 
                if(this.slice.num3==0){
                    this.style.hotspotOpacity=0.3;
                }
        }
    },
  mounted() {
    getHotpotArticles().then(res=>{
       this.headitems=res;
    })
  }
}
</script>

<style>
.page .page-top{
position: absolute;
width: 100%;
height: 450px; 
top: 160px;   
}
.page .page-top .headlines{
/* position: relative; */
width: 340px;
height: 400px;
/* border: 1px solid black; */
margin-left: 110px;
float: left;
}
.headlines .headlines-title{
width: 100%;
height: 24px;
/* border: 1px solid black; */
display: flex;
margin-bottom: 10px;    
}
.page-top .headswiper{
width: 280px;
height: 400px;
/* border: 1px solid black; */
position: absolute;
left:453px ;
margin-right: 0px;
/* display: flex; */

}
.page-top .headswiper.headswiper-top{
width: 280px;
height: 20px;
/* position: relative; */
border: 1px solid black;
/* display: flex;         */
}
.headswiper .headswiper-link li,.hotspot-link li{
list-style-type: none;
margin: 15px 20px;
}
.headswiper .headswiper-link li a, .hotspot-link li a{
color: black;
text-decoration: none;

}
.hotspot-link li a :hover{
text-decoration: underline;   
}
.headswiper .headswiper-link li a:hover{
text-decoration: underline;
}
.page-top .hotspot{
width: 280px;
height: 400px;
/* border: 1px solid black; */
position: absolute;
left:733px ;
margin-right: 0px;

}
.hotspot .hotspot-top{
width: 100%;
height: 24px;
position: relative;
/* border: 1px solid black; */
}
.page-top .picture-ad{
width: 280px;
height: 420px;
border: 1px solid black;
position: absolute;
left:1013px ;
margin-right: 0px;

}

</style>
